<template>
    <wd-gap :height="h" v-if="isFixed"></wd-gap>
    <view :class="{ 'hy-submit': isFixed }">
        <view class="df jsb ac" style="margin: 0 30rpx">
            <view class="f1" style="padding-right: 30rpx" v-if="$slots.left">
                <slot name="left"></slot>
            </view>
            <view class="f1">
                <uv-button type="primary" :loading="loading" v-bind="$attrs" :customStyle="{
                    background: '#007aff',
                }" @click="emit('handleSubmit')">{{ title }}</uv-button>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
const emit = defineEmits(["handleSubmit"])

const props = withDefaults(
    defineProps<{
        title?: string //标题
        loading?: boolean //是否加载中
        size?: "medium" | "small" | "large" //按钮大小
        isFixed?: boolean //是否固定在底部
    }>(),
    {
        title: "提交",
        loading: false,
        size: "large",
        isFixed: true,
    },
)
const h = ref("")
//获取hy-submit的高度
onMounted(() => {
    if (props.isFixed) {
        uni.createSelectorQuery()
            .select(".hy-submit")
            .boundingClientRect()
            .exec((res) => {
                console.log("res:", res);
                h.value = res[0].height + "px"
            })
    }
})
</script>

<style lang="scss" scoped>
.hy-submit {
    padding: 30rpx 0;
    background-color: var(--bg-color, #ffffff);
    width: 750rpx;
    position: fixed;
    bottom: 0;
}
</style>
